<template>
    <div class="main">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <div class="backgroundImage">
            <!-- 左上 -->
            <div class="ball1"></div>
            <div class="ball2"></div>
            <!-- 右上 -->
            <div class="ball3"></div>
            <div class="ball4"></div>
            <!-- 左下 -->
            <div class="ball5"></div>
            <div class="ball6"></div>
            <!-- 右下 -->
            <div class="ball7"></div>

            <!-- 背景图 -->
            <div class="bg1"></div>
            <div class="bg2"></div>
            <div class="bg3"></div>
            <div class="bg4"></div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import navTop from "@/components/common/nav-top"
export default {
    name: "application",
    components: {
        navTop
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 51.2rem;
    min-height: 100vh;
    background: linear-gradient(137deg, #F0F0F0 0%, #E9E5F0 100%);
    position: relative;
}

.backgroundImage {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .ball1 {
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: cover;
        width: 0.69rem;
        height: 0.69rem;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: cover;
        width: 0.45rem;
        height: 0.45rem;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: cover;
        width: 1.39rem;
        height: 1.39rem;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: cover;
        width: 0.83rem;
        height: 0.83rem;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: cover;
        width: 2.08rem;
        height: 2.11rem;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: cover;
        width: 1.25rem;
        height: 1.28rem;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: cover;
        width: 0.93rem;
        height: 0.96rem;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        background: url('@/assets/img/application/bg1.png') no-repeat;
        background-size: cover;
        width: 6.13rem;
        height: 5.23rem;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        background: url('@/assets/img/application/bg2.png') no-repeat;
        background-size: cover;
        width: 11.25rem;
        height: 7.97rem;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        background: url('@/assets/img/application/bg3.png') no-repeat;
        background-size: cover;
        width: 10.35rem;
        height: 10.35rem;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        background: url('@/assets/img/application/bg4.png') no-repeat;
        background-size: cover;
        width: 12.13rem;
        height: 6.24rem;
        position: absolute;
        right: 4.37rem;
        bottom: 0;
    }

}
</style>